<template>
	<view class="taskDetail">
		<!-- 导航栏 -->
		<navBar :backFont="true" :title="'高一1班 引体向上 -- 任务详情'" >
		</navBar>	
		<view class="taskDetail_con">
			<view class="taskDetail_left">
				<text class="current_font">当前测试进展</text>
				<view class="test_card">
					<text class="test_num">50</text>
					<text class="fail_font">未测</text>
					<myBtn title="继续测试" color="#0aa1ed" width="13vw" height="5vh"></myBtn>
				</view>
				<view class="total">
					<text class="total_font">统计分析</text>
					<view class="echarts_con">
						<image src="" mode=""></image>
						<view class="tuli">
							
						</view>
						<view class="go_more">
							<text>查看更多</text>
							<uni-icons class="right_icon" type="right"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="taskDetail_right">
				<text class="scoreInquiry">成绩查询</text>
				<image class="scoreImg" src="../../static/icons/score.png" mode="widthFix"></image>
				<myBtn class="score_btn" title="查看成绩" color="#65ca00" width="13vw" height="5vh"></myBtn>
			</view>
		</view>
		
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive } from "vue";
	let reactive_obj = reactive({
		class_list:[
		]as any[],//班级列表
	})
	
	let loading = ref(false)

	const goAddFace = () => {
		uni.navigateTo({
			url:"/pages/addStudentsPicture/addStudentsPicture"
		})
	}
</script>

<style>
.taskDetail{
	width: 100vw;
	
}
.taskDetail_con{
	display: flex;
	width: 96vw;
	margin: 0 auto;
	padding-top: 13vh;
	justify-content: space-around;
	box-sizing: border-box;
}
.taskDetail_left{
	width: 56vw;
	background-color: #fff;
	border-radius: 1vw;
	padding: 1vw 2vh;
	flex-direction: column;
	display: flex;
}
.current_font{
	display: block;
	margin: 2vh 0 ;
	font-size: 1.1rem;
	border-bottom: 1px solid #f8f8f8;
	padding-bottom: 2vh;
}
.test_card{
	display: flex;
	background-color: #f8f8f8;
	height: 40vh;
	width: 20vw;
	flex-direction: column;
	margin: 0 auto;
	justify-content: space-around;
	border-radius: 1vw;
	align-items: center;
}
.test_num{
	font-size: 2rem;
	font-weight: bold;
	margin-top: 7vh;
}
.fail_font{
	color: #aaa;
	margin: 1vh 0;
}
.total{
	display: flex;
	flex-direction: column;
}
.total_font{
	margin: 2vh 0 ;
	font-size: 1.1rem;
}
.echarts_con{
	display: flex;
	height: 20vh;
	align-items: center;
	justify-content: space-around;
}
.go_more{
	color: #0aa1ed;
}
.right_icon{
	color: #0aa1ed !important;
}
.taskDetail_right{
	display: flex;
	flex-direction: column;
	width: 32vw;
	background-color: #fff;
	border-radius: 1vw;
	padding: 1vw 2vh;
}
.scoreInquiry{
	display: block;
	margin: 2vh 0 ;
	font-size: 1.1rem;
	border-bottom: 1px solid #f8f8f8;
	padding-bottom: 2vh;
}
.scoreImg{
	width: 25vw;
	margin: 10vh auto;
}
.score_btn{
	margin: 0 auto;
}
</style>
